<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudyDemo</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <div><a href="index.html">返回首页</a></div><hr>
    <h1>Hello App</h1>
    <!--一般来说只有一个插口，用于接收路由映射的组件，当插口分别命名之后，情况发生了变化：-->
    <!--三个插口 outlet，表示可以放三个组件。一条路由对应一个组件，一个组件对应一个插口-->
    <router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
</div>
<script>
    const Foo = { template: '<div>i am Foo component</div>' }
    const Bar = { template: '<div>i am Bar component</div>' }
    const Baz = { template: '<div>i am Baz component</div>' }
    const router = new VueRouter({
        routes: [
            // 一条路由包含了三个组件Foo,Bar,Baz，分给了三个插口default,a,b
            {
                path: '/',
                components: {
                    default: Foo,
                    a: Bar,
                    b: Baz
                }
            }
        ]
    })

    const vue = new Vue({
        router
    }).$mount('#app')
</script>
</body>
</html>